<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <style>
        #list li {
            list-style-type: none;
            width: 80px;
            height: 30px;
            line-height: 30px;
            background-color:beige;
            text-align: center;
            float: left;
            margin-left: 5px;
        }

        #list li.current {
            background-color: burlywood;
        }

        #list li a {
            text-decoration: none;
        }
    </style>

</head>
<body>
	  <div id="menu">
        <ul id="list">
            <li class="current"><a href="javascript:void(0)">首页</a></li>
            <li><a href="javascript:void(0)">播客</a></li>
            <li><a href="javascript:void(0)">博客</a></li>
            <li><a href="javascript:void(0)">相册</a></li>
            <li><a href="javascript:void(0)">关于</a></li>
            <li><a href="javascript:void(0)">帮助</a></li>
        </ul>
    </div>

</body>
<script src="../jquery-1.12.4.js"></script>
<script>

$("#list li").on("click",function(){
	$("#list li").removeClass("current");
	$(this).addClass("current");
})
</script>
</html>